<template>

    <NuxtLayout name="manage-layout">
        <template #main>

            <div class="min-h-dvh flex justify-center">

                <div class="card bg-base-100 w-11/12 shadow-xl">
                    <div class="card-body">
                        <h4 class="card-title">入住情况列表</h4>
                        <div class="stats shadow w-56">
                            <div class="stat">
                                <div class="stat-figure text-secondary cursor-pointer" @click="showFormModal(null)">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                         stroke-width="1.5"
                                         stroke="currentColor" class="size-6">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M12 4.5v15m7.5-7.5h-15"/>
                                    </svg>
                                </div>
                                <div class="stat-title">数据量</div>
                                <div class="stat-value">{{ tableData.total }}</div>
                                <div class="stat-desc">共{{tableData.pages}}页数据</div>
                            </div>
                        </div>

                      <div class="flex flex-col gap-2">
                        <div class="flex flex-wrap items-end gap-6">  <!-- 添加 items-end 使按钮对齐 -->
                          <div class="form-control w-60">
                            <label class="label">
                              <span class="label-text text-sm font-semibold">房间类型</span>
                            </label>
                            <select v-model="searchForm.roomType"
                                    class="select select-bordered w-full">
                              <option value="">全部</option>
                              <option v-for="type in roomTypeList"
                                      :key="type.id"
                                      :value="type.type">
                                {{ type.type }}
                              </option>
                            </select>
                          </div>
                          <div class="form-control w-60">
                            <label class="label">
                              <span class="label-text text-sm font-semibold">房间号</span>
                            </label>
                            <input type="text" v-model="searchForm.roomId"
                                   placeholder="请输入房间号"
                                   class="input input-md input-bordered"/>
                          </div>
                          <div class="form-control w-60">
                            <label class="label">
                              <span class="label-text text-sm font-semibold">入住人员</span>
                            </label>
                            <input type="text" v-model="searchForm.customerName"
                                   placeholder="请输入入住人员"
                                   class="input input-md input-bordered"/>
                          </div>
                          <!-- 搜索按钮移到这里 -->
                          <button class="btn btn-square btn-outline btn-md btn-info"
                                  @click="loadData()"
                                  title="查询">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                 fill="none"
                                 viewBox="0 0 24 24"
                                 stroke-width="1.5"
                                 stroke="currentColor"
                                 class="size-6">
                              <path stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
                            </svg>
                          </button>
                        </div>
                      </div>


                        <div class="card bg-base-100 w-full shadow-xl">
                            <div class="card-body">
                                <div class="overflow-x-auto">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>房间类型</th>
                                            <th>房间号</th>
                                            <th>入住人员</th>
                                            <th>入住时间</th>
                                            <th>入备注</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        <tr v-for="item in tableData.list" class="hover">
                                            <td>{{item.roomType}}</td>
                                            <td>{{item.roomId}}</td>
                                            <td>{{item.customerName}}</td>
                                            <td>{{item.orderTime}}</td>
                                            <td>{{item.note}}</td>
                                            <td>
                                                <button class="btn btn-xs mx-1 hover:bg-green-400" @click="showDetailsModal(item.id)" title="查看">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                                         stroke="currentColor" class="size-6 hover:text-white">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                              d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                              d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                                                    </svg>
                                                </button>
                                                <button class="btn btn-xs mx-1 hover:bg-cyan-400" @click="showFormModal(item.id)"
                                                        title="编辑">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                         viewBox="0 0 24 24" stroke-width="1.5"
                                                         stroke="currentColor" class="size-6 hover:text-white">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                              d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/>
                                                    </svg>
                                                </button>
                                                <button class="btn btn-xs mx-1 hover:bg-rose-400" @click="del(item.id)" title="删除">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                         viewBox="0 0 24 24" stroke-width="1.5"
                                                         stroke="currentColor" class="size-6 hover:text-white">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                              d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
                                                    </svg>
                                                </button>
                                            </td>
                                        </tr>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="card-actions justify-center mt-6">
                            <button @click="toPage(item)"
                                    :class="'join-item btn-xs btn' + (item === searchForm.page ? ' btn-neutral ' : '')"
                                    v-for="item in tableData.pagination">{{ item }}
                            </button>
                        </div>
                    </div>
                </div>


                <!--        详情弹出层-->
                <div>
                    <input type="checkbox" id="detailsModal" ref="detailsModalCheckboxRef" class="modal-toggle"
                           @change="detailsModalCheckboxChanged"/>
                    <div class="modal" role="dialog">
                        <div class="modal-box w-6/12 max-w-5xl modal-box-custom">
                            <div class="modal-action">
                                <label for="detailsModal"
                                       class="absolute right-4 top-4 cursor-pointer">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                    </svg>
                                </label>
                            </div>
                            <h3 class="text-lg font-bold">查看详情</h3>
                            <div class="mt-4" v-if="detailsData !== null">
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text font-semibold">房间类型</span>
                                    </label>
                                    <span class="text-sm">{{detailsData.roomType}}</span>
                                </div>
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text font-semibold">房间号</span>
                                    </label>
                                    <span class="text-sm">{{detailsData.roomId}}</span>
                                </div>
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text font-semibold">入住人员</span>
                                    </label>
                                    <span class="text-sm">{{detailsData.customerName}}</span>
                                </div>
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text font-semibold">入住时间</span>
                                    </label>
                                    <span class="text-sm">{{detailsData.orderTime}}</span>
                                </div>
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text font-semibold">入备注</span>
                                    </label>
                                    <p class="text-sm text-gray-600">{{detailsData.note}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--        编辑弹出层-->
                <dialog-modal ref="formDialogModalRef">
                    <template #main>
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text text-sm font-semibold">房间类型</span>
                            </label>
<!--                            <input type="text" v-model="form.roomType" placeholder="请输入房间类型"
                                   class="input input-md input-bordered"/>-->
                          <select v-model="form.roomType"
                                  class="select select-bordered w-full">
                            <option value="">请选择房间类型</option>
                            <option v-for="type in roomTypeList"
                                    :key="type.id"
                                    :value="type.type">
                              {{ type.type }}
                            </option>
                          </select>
                        </div>
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text text-sm font-semibold">房间号</span>
                            </label>
                            <input type="text" v-model="form.roomId" placeholder="请输入房间号"
                                   class="input input-md input-bordered"/>
                        </div>
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text text-sm font-semibold">入住人员</span>
                            </label>
                            <input type="text" v-model="form.customerName" placeholder="请输入入住人员"
                                   class="input input-md input-bordered"/>
                        </div>
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text text-sm font-semibold">入住时间</span>
                            </label>
                            <date-single-picker v-model="form.orderTime" />
                        </div>
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text text-sm font-semibold">入备注</span>
                            </label>
                            <textarea class="textarea textarea-bordered h-24 w-9/12 mt-2" v-model="form.note"
                                      placeholder="请输入入备注"></textarea>
                            <div class="label w-9/12">
                                <span class="label-text-alt"></span>
                                <span class="label-text-alt">{{ form.note === undefined ? 0 :form.note.length }}字</span>
                            </div>
                        </div>
                    </template>
                    <template #footer>
                        <div>
                            <button class="btn bg-green-400 hover:bg-green-500 text-white" @click="submitForm()">提交</button>
                        </div>
                    </template>
                </dialog-modal>

            </div>
        </template>
    </NuxtLayout>


</template>

<script setup>

import {httpDel, httpGet, httpPost, genFileUrl, postForm} from "~/utils/http/http-helper.js";
import {generatePaginationArray} from "~/utils/pagination/index.js";
import {notificationError, notificationSuccess, notificationWarning} from "~/utils/notification/index.js";

definePageMeta({
    index: 'manage-serviceInfo',
})

const formDialogModalRef = ref()
const detailsModalCheckboxRef = ref()

const searchForm = ref({
    page: 1,
    size: 10,
})
const tableData = ref({
    list: [],
    total: 0,
    pages: '',
    pagination: []
})

const form = ref({})
const detailsData = ref(null)

/**
 * 初始化表单
 */
function initForm() {
    form.value = {}
    detailsData.value = null
}

function detailsModalCheckboxChanged(event) {
    const checked = event.target.checked
    if (checked) {
    } else {
    }
}

/**
 * 展示详情弹出层
 * @param id  主键ID null则为新增
 */
function showDetailsModal(id) {
    httpGet('/api/serviceInfo/' + id).then(resp => {
        if (!resp.success) {
            notificationError(resp.msg)
            return
        }
        const data = resp.data
        detailsData.value = data
        detailsModalCheckboxRef.value.checked = true
    })
}

/**
 * 关闭详情弹出层
 */
function closeDetailsModal() {
    detailsModalCheckboxRef.value.checked = false
    initForm()
}

/**
 * 关闭表单弹出框
 */
function closeFormModal() {
    formDialogModalRef.value.closeDialogModal()
    initForm()
}

/**
 * 表单提交
 * 新增或者更新
 */
function submitForm() {
    if (detailsData.value === null) {
        // 新增
        httpPost('/api/serviceInfo', form.value).then(resp => {
            if (resp.success) {
                notificationSuccess('添加入住情况成功')
                closeFormModal()
                loadData()
            } else {
                notificationError(resp.msg)
            }
        })
    } else {
        // 更新
        httpPost('/api/serviceInfo/' + detailsData.value.id, form.value).then(resp => {
            if (resp.success) {
                notificationSuccess('编辑入住情况成功')
                closeFormModal()
                loadData()
            } else {
                notificationError(resp.msg)
            }
        })
    }
}

if (process.client) {
    loadData()
}

/**
 * 加载分页数据
 */
function loadData() {
    httpGet('/api/serviceInfo', searchForm.value).then(resp => {
        console.log(resp)
        if (!resp.success) {
            notificationError(resp.msg)
            return
        }
        const data = resp.data
        // 数据总数
        const total = data.totalElements
        tableData.value.list = data.content
        tableData.value.total = total
        tableData.value.pages = data.pages
        // 当前页码
        const currentPage = searchForm.value.page
        const pageSize = searchForm.value.size
        const pagination = generatePaginationArray(total, pageSize, currentPage); // 生成分页数组
        tableData.value.pagination = pagination
    })
}

/**
 * 跳转到某页
 * @param selectedPage  页码
 */
function toPage(selectedPage) {
    searchForm.value.page = selectedPage
    loadData()
}

/**
 * 展示模态框
 * @param id  主键ID null则为新增
 */
function showFormModal(id) {
    initForm()
    if (null !== id) {
        httpGet('/api/serviceInfo/' + id).then(resp => {
            if (!resp.success) {
                notificationError(resp.msg)
                return
            }
            const data = resp.data
            detailsData.value = data
            form.value = data
            formDialogModalRef.value.showDialogModal('修改入住情况')
        })
    } else {
        formDialogModalRef.value.showDialogModal('添加入住情况')
    }
}

/**
 * 删除
 * @param id  主键ID
 */
function del(id) {
    httpDel('/api/serviceInfo/' + id).then(resp => {
        if (resp.success) {
            notificationSuccess('删除入住情况成功')
            loadData()
        } else {
            notificationError(resp.msg)
        }
    })
}

// 在 script setup 中添加一个新的响应式变量来存储房间类型列表
const roomTypeList = ref([])

// 添加获取房间类型列表的方法
function loadRoomTypes() {
  httpGet('/api/room/types').then(resp => {
    if (resp.success) {
      console.log('房间类型数据:', resp.data); // 添加调试日志
      roomTypeList.value = resp.data
    } else {
      console.error('加载房间类型失败:', error); // 添加错误日志
      notificationError(resp.msg)
    }
  })
}

// 在页面加载时调用此方法
if (process.client) {
  loadRoomTypes() // 添加这行
  loadData()
}



</script>

<style scoped>

</style>